<template>
  <div class="image-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-button">
        <div>
          <el-radio-group v-model="type" size="small" @change="loadImages(1, false)">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
        </div>
        <el-button size="small" type="success" @click="showUplog">添加素材</el-button>
      </div>
      <el-row class="images" :gutter="10">
        <el-col class="image-item" :lg="4" :md="6" :xs="6" :sm="6" v-for="(image, index) in images" :key="index">
          <el-image
            style="height: 180px; margin-bottom: 15px;"
            :src="image.url"
            >
          </el-image>
          <div class="op">
            <i :class="{
              'el-icon-star-on': image.is_collected,
              'el-icon-star-off': !image.is_collected,
              'fontColor-on':  image.is_collected,
              'fontColor-off':  !image.is_collected
            }"
            @click="onCollect(image)"
            ></i>
            <i class="el-icon-delete" @click="onCollectDel(image.id)"></i>
          </div>
        </el-col>
      </el-row>

      <el-pagination
        class="page"
        background
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="loadImages"
        layout="prev, pager, next"
        :disabled="disabled"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog v-if="show" title="上传素材" width="30%"
         :append-to-body="true" :visible.sync="show">
      <el-upload
        drag
        :on-success="uploadSuccess"
        :on-error="uploadError"
        name="image"
        :headers="uploadHeader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { getImages, collectImage, collectImageDel } from '@/api/images'
export default {
  name: 'ImageIndex',
  data () {
    const user = JSON.parse(window.sessionStorage.getItem('user'))
    return {
      type: false,
      images: [],
      total: 0,
      currentPage: 1,
      pageSize: 18,
      disabled: false,
      show: false,
      uploadHeader: {
        Authorization: `Bearer ${user.token}`
      }
    }
  },
  methods: {
    loadImages (page = 1, isall = false) {
      this.disabled = true
      this.currentPage = page
      if (isall) {
        this.type = false
      }
      getImages({
        collect: isall ? false : this.type,
        page: this.currentPage,
        per_page: this.pageSize
      }).then(res => {
        // console.log(res.data)
        this.images = res.data.data.results
        this.total = res.data.data.total_count
        this.disabled = false
      }).catch(() => {
        this.disabled = false
      })
    },
    showUplog () {
      this.show = true
    },
    uploadSuccess () {
      this.show = false
      this.loadImages(this.currentPage, true)
    },
    uploadError () {
      this.$message.error('上传素材失败！')
    },
    onCollect (image) {
      collectImage(image.id, !image.is_collected).then(() => {
        image.is_collected = !image.is_collected
        this.loadImages(this.currentPage)
      })
    },
    onCollectDel (id) {
      collectImageDel(id).then(() => {
        this.$message.success('删除素材成功！')
        this.loadImages(this.currentPage)
      }).catch(() => {
        this.$message.error('删除素材失败！')
      })
    }
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  created () {
    this.loadImages(1)
  },
  mounted () {}
}
</script>

<style scpoed lang="less">
.image-container{
  .header-button{
    display: flex;
    justify-content: space-between;
  }
  .images{
    margin-top: 25px;
  }
  .page{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .image-item{
    position: relative;
    .op{
      height: 40px;
      background-color:rgba(204, 204, 204, .5);
      position: absolute;
      bottom: 18px;
      left: 5px;
      right: 5px;
      display: flex;
      font-size: 20px;
      justify-content: space-around;
      align-items: center;
      color: rgba(240, 255, 255, 0.925);
    }
    .fontColor-on{
      color: rgba(206, 84, 14, 0.925);
    }
    .fontColor-off{
      color: rgba(240, 255, 255, 0.925);
    }
  }
}
</style>

<style lang="less">
.el-upload-dragger{
  width: 100% !important;
}
.el-upload--text{
  width: 100% !important;
}
</style>
